<html>
<head>

<script type="text/javascript">
    function validateForm(form) {

        //Check code
        var pro_id = document.getElementById("form_pro_id_");
        if (pro_id.value == '0') {
            alert("Please enter value.");
            pro_id.style.borderStyle = "solid";
            pro_id.style.borderColor = "#FF0000";
            pro_id.style.borderWidth = "1px";
            pro_id.focus();
            return false;
        }else{
            pro_id.style.borderStyle = "solid";
            pro_id.style.borderColor = "#00CC00";
            pro_id.style.borderWidth = "1px";
        }
        
        var dis_id = document.getElementById("form_dis_id_");
        if (dis_id.value == '0') {
            alert("Please enter value.");
            dis_id.style.borderStyle = "solid";
            dis_id.style.borderColor = "#FF0000";
            dis_id.style.borderWidth = "1px";
            dis_id.focus();
            return false;
        }else{
            dis_id.style.borderStyle = "solid";
            dis_id.style.borderColor = "#00CC00";
            dis_id.style.borderWidth = "1px";
        }

        var name = document.getElementById("name");
        if (name.value == '') {
            alert("Please enter value.");
            document.getElementById('error-name').innerHTML = " <FONT COLOR=\"#FF0000\">Please enter value.</FONT>";
            name.focus();
            return false;
        }else{
            document.getElementById('error-name').innerHTML = "";
        }
        
        //Check latitude
        var latitude = document.getElementById("latitude");
        if (latitude.value == '') {
            alert("Please enter value.");
            document.getElementById('error-latitude').innerHTML = " <FONT COLOR=\"#FF0000\">Please enter value.</FONT>";
            latitude.focus();
            return false;
        }else{
            document.getElementById('error-latitude').innerHTML = "";
        }
        //Check longitude
        var longitude = document.getElementById("longitude");
        if (longitude.value == '') {
            alert("Please enter value.");
            document.getElementById('error-longitude').innerHTML = " <FONT COLOR=\"#FF0000\">Please enter value.</FONT>";
            longitude.focus();
            return false;
        }else{
            document.getElementById('error-longitude').innerHTML = "";
        }
    }
</script>


<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();

function geocodePosition(pos) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {
      updateMarkerAddress(responses[0].formatted_address);
    } else {
      updateMarkerAddress('Cannot determine address at this location.');
    }
  });
}

function updateMarkerStatus(str) {
  document.getElementById('markerStatus').innerHTML = str;
}

function updateMarkerPosition(latLng) {

  document.getElementById("latitude").value = latLng.lat();
  document.getElementById("longitude").value = latLng.lng();
  document.getElementById('info').innerHTML = [
    latLng.lat(),
    latLng.lng()
  ].join(', ');


}

function updateMarkerAddress(str) {
  document.getElementById('address').innerHTML = str;
}

function initialize() {
  <!--[if $form.latitude && $form.longitude]-->
   var latLng = new google.maps.LatLng(<!--[$form.latitude]-->, <!--[$form.longitude]-->);
  <!--[else]-->
   var latLng = new google.maps.LatLng(13.759127,100.565185);
  <!--[/if]-->

  var map = new google.maps.Map(document.getElementById('mapCanvas'), {
      scrollwheel: false,
    zoom: 6,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.HYBRID
  });
  var marker = new google.maps.Marker({
    position: latLng,
    title: '<!--[$form.name]-->',
    map: map,
    draggable: true
  });
  
  // Update current position info.
  updateMarkerPosition(latLng);
  geocodePosition(latLng);
  
  // Add dragging event listeners.
  google.maps.event.addListener(marker, 'dragstart', function() {
    updateMarkerAddress('Dragging...');
  });
  
  google.maps.event.addListener(marker, 'drag', function() {
    updateMarkerStatus('Dragging...');
    updateMarkerPosition(marker.getPosition());
  });
  
  google.maps.event.addListener(marker, 'dragend', function() {
    updateMarkerStatus('Drag ended');
    geocodePosition(marker.getPosition());
  });
}

// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script language="javascript" src="modules/VoteDataCenter/pnajax/ajax_form_tambon.js"></script>
</head>
<!--[ include file="admin_header_menu.htm" ]--><div style="clear:both"></div>
<TABLE width="100%">
<TR>
  <TD valign="top" width="80%">
      <fieldset>
      <legend>Map information</legend>

      <body>
        <style>
        #mapCanvas {
          width: 100%;
          height: 600px;
          float: left;
        }
        #infoPanel {
          float: left;
          margin-left: 10px;
        }
        #infoPanel div {
          margin-bottom: 5px;
        }
        </style>
        <div id="mapCanvas"></div>
      </fieldset>
  </TD>
  <TD valign="top" width="20%">
      <fieldset>
        <legend>Tambon Information</legend>
          <form id='form' class='form' action="<!--[pnmodurl modname='VoteDataCenter' type='adminform' func='submit' ctrl='Tambon']-->" method="post" onsubmit="return validateForm(this)">
              <input type="hidden" name="form[id]" value="<!--[$smarty.get.id]-->" />

              <TABLE width='100%' border="0">
                  <TR>
                      <TD class='td-label' align="left" width="20%"><B>Province&nbsp;:&nbsp;</B></TD>
                  </TR>
                  <TR>
                      <TD align="left">
                        <!--[selector_object_array_ex
                              modname="VoteDataCenter" 
                              class="Province" 
                              field="id" 
                              displayField="name"  
                              name="form[pro_id]" 
                              selectedValue=$form.pro_id 
                              sort="pro_name"
                              onChange="getDistrictByProvinceID()"
                              defaultValue="0"
                              defaultText="กรุณาเลือก"
                        ]-->
                        <FONT SIZE="2" COLOR="#FF0000">&nbsp;*</FONT>
                        <div id='error-province'></div>
                      </TD>
                  </TR>
                  <TR>
                      <TD class='td-label' align="left" width="20%"><B>District&nbsp;:&nbsp;</B></TD>
                  </TR>
                  <TR>
                      <TD align="left">
                        <span id="form_district">
                            <!--[if (isset($smarty.request.form.dis_id) || $smarty.request.form.dis_id == 0) && $smarty.request.form.pro_id]-->
                              <!--[selector_object_array_ex modname="VoteDataCenter" 
                                      class="District" 
                                      field="id" 
                                      displayField="name"  
                                      name="form[dis_id]" 
                                      sort="dis_name"
                                      selectedValue=$smarty.request.form.dis_id
                                      queryField = dis_pro_id
                                      queryValue = $smarty.request.form.pro_id
                              ]-->
                            <!--[elseif $form.dis_id && $form.pro_id]-->
                              <!--[selector_object_array_ex modname="VoteDataCenter" 
                                      class="District" 
                                      field="id" 
                                      displayField="name"  
                                      name="form[dis_id]" 
                                      sort="dis_name"
                                      selectedValue=$form.pro_id
                                      queryField = dis_pro_id
                                      queryValue = $form.pro_id
                              ]-->
                            <!--[else]-->
                            -
                            <!--[/if]-->
                        </span>
                      </TD>
                  </TR>
                  <TR>
                      <TD class='td-label' align="left" width="20%"><B>name&nbsp;:&nbsp;</B></TD>
                  </TR>
                  <TR>
                      <TD align="left">
                        <input id="name" type="text" name="form[name]" value="<!--[$form.name]-->" title="province" class="required"  /><FONT SIZE="2" COLOR="#FF0000">&nbsp;*</FONT>
                        <div id='error-name'></div>
                      </TD>
                  </TR>
                  <TR>
                      <TD class='td-label' align="left" width="20%"><B>latitude&nbsp;:&nbsp;</B></TD>
                  </TR>
                  <TR>
                      <TD align="left">
                        <input id="latitude" type="text" name="form[latitude]" value="<!--[$form.latitude]-->" title="latitude" class="required" size="30"  /><FONT SIZE="2" COLOR="#FF0000">&nbsp;*</FONT>
                        <span id='error-latitude'></span>
                      </TD>
                  </TR>
                  <TR>
                      <TD class='td-label' align="left" width="20%"><B>longitude&nbsp;:&nbsp;</B></TD>
                  </TR>
                  <TR>
                      <TD align="left">
                        <input id="longitude" type="text" name="form[longitude]" value="<!--[$form.longitude]-->" title="longitude" class="required" size="30" /><FONT SIZE="2" COLOR="#FF0000">&nbsp;*</FONT>
                        <span id='error-longitude'></span>
                      </TD>
                  </TR>
                  <TR>
                      <TD align="left" width="100%">
                        <INPUT TYPE="submit" value="submit">
                        <input type="button" name="Cancel" value="Cancel" onclick="window.location = '<!--[pnmodurl modname='VoteDataCenter' type='admin' func='list' ctrl='Tambon']-->' " />
                      </TD>
                  </TR>
              </TABLE>
          </form><BR>
        <hr>
        <div id="infoPanel">
          <b>Marker status:</b>
          <div id="markerStatus"><i>Click and drag the marker.</i></div>
          <b>Current position:</b>
          <div id="info"></div>
          <b>Closest matching address:</b>
          <div id="address"></div>
        </div>
      </body>
      </html>
      </fieldset><BR>

  </TD>
</TR>
</TABLE>


<!--[include file='admin_std_footer.htm']-->